<template>
  <div class="today-event-list list-opacity">
    <div class="alarm-list-box" ref="eventList">
      <el-scrollbar v-if="list.length">
        <transition-group name="list">
          <div class="event-item" v-for="(item, index) in list" :key="index" :style="animationStyle(index % 10)">
            <div class="left-pic">
              <el-image :src="item.ThumbnailUrl || item.AlarmPic || testImg" :preview-src-list="[item.AlarmPic]"
                :initial-index="0" fit="cover" class="alarm-image" preview-teleported hide-on-click-modal>
              </el-image>
            </div>
            <div class="right-info-wrap" @click="clickItem(item)">
              <div class="alarm-level" :class="item.AlarmLevel === '异常' ? 'level-warn' : 'level-alarm'">
                {{ item.AlarmLevel || '-' }}</div>
              <div class="event-type-text">{{ item.AlarmTypeName || '-' }}</div>
              <div style="margin-top: 16px">
                <div class="row-item">
                  <i class="h-icon-user"></i>
                  <div class="val ellipse">
                    <span>{{ item.SensorDeviceName || '-' }}</span>
                  </div>
                </div>
                <div class="row-item">
                  <i class="h-icon-clock"></i>
                  <div class="val">{{ item.AlarmTime || '-' }}</div>
                </div>
                <div class="row-item">
                  <div class="val" :class="item.HandlerStatus === '未处置' ? 'no-handler' : 'handler'">{{
                    item.HandlerStatus || '-' }}</div>
                </div>
              </div>
            </div>
          </div>
        </transition-group>
      </el-scrollbar>
      <div class="empty" v-else>暂无预警数据</div>
    </div>
  </div>
</template>

<script>
import { getAlarmList } from "@/api/alarm"
import { getSensorDeviceList } from "@/api/h3yun"
import testImg from '@/assets/images/test.png'

export default {
  props: {
    areaCode: {
      type: String,
      default: () => ''
    },
    lastAlarmData: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      list: [],
      pageNo: 1,
      loading: false,
      timer: null,
      mySensorDeviceList: [],
      testImg
    }
  },
  methods: {
    animationStyle(index) {
      // 设置每个元素的动画延时，每个后续元素延时更长
      const delay = index * 100; // 100ms 间隔
      return {
        transitionDelay: `${delay}ms`
      };
    },
    formatDate(date) {
      return '2025-03-18 10:00:00'
    },
    ruleName(val) {
      let info = [] //this.rules.find(it => it.value === val)
      return info ? info.name : '--'
    },
    clickItem(item) {
      item.ruleName = this.ruleName(item.eventType)
      this.$emit('clickItem', item)
    },
    getDataHandler() {
      getAlarmList({
        pageNo: this.pageNo,
        pageSize: 20, //后端写死了20
        areaCode: this.areaCode,
      }).then(res => {
        this.loading = false
        this.list = res.data
      })
    },
  },
  async mounted() {
    let res = await getSensorDeviceList()
    this.mySensorDeviceCode = res.data.map(it => it.DeviceCode)
    console.log(this.mySensorDeviceCode)
  },
  beforeDestroy() {
    this.timer && clearInterval(this.timer)
  },
  created() {
    this.getDataHandler()
  },
  watch: {
    lastAlarmData: {
      handler(newVal) {
        //如果newVal中的MN在mySensorDeviceList中存在，则添加到list中
        if (this.mySensorDeviceCode.includes(newVal.MN)) {
          console.log('包含，添加到list中')
          this.list.unshift(newVal) 
        } else {
          console.log('不包含')
        }
      },
    },
    areaCode: {
      handler(newVal) {
        this.getDataHandler()
      },
      deep: true,
    }
  }
}
</script>

<style scoped lang="scss">
.today-event-list {
  display: flex;
  overflow: hidden;
  flex: 1;
  flex-direction: column;
  height: 100%;

  .alarm-list-box {
    flex: 1;
    overflow: auto;
    backdrop-filter: blur(2px);

    .event-item {
      background: url("@/assets/images/screen/alarm-event-bg.png");
      background-size: 100% 100%;
      width: 354px;
      height: 96px;
      padding: 10px;
      opacity: 1;
      transform: translateY(0px);
      position: relative;

      .list-alarm-level-tag {
        position: absolute;
        top: 13px;
        right: 9px;
        font-size: 12px;
        color: #fff;
        background: #2080f7;
        padding: 2px 4px;
        border-radius: 2px;
      }

      &.active {
        background: url("@/assets/images/screen/alarm-event-bg-active.png");
        background-size: 100% 100%;
      }

      .list-alarm-handler {
        position: absolute;
        bottom: 8px;
        right: 9px;
        font-size: 12px;
        width: 54px;
        height: 20px;
        line-height: 20px;
        border-radius: 2px;
        text-align: center;
        cursor: pointer;
        color: #fff;
        background: #2080f7;
        z-index: 999;

        &:hover {
          opacity: 0.85;
        }
      }

      display: flex;

      .left-pic {
        flex-basis: 95px;
        height: 95px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        top: 2px;

        .alarm-image {
          width: 91px;
          height: 82px;
        }
      }

      .right-info-wrap {
        cursor: pointer;
        margin: 2px 0 0 4px;
        flex: 1;
        position: relative;

        .alarm-level {
          position: absolute;
          top: 2px;
          right: 2px;
          font-size: 12px;
          color: #fff;
          background: #2080f7;
          padding: 2px 4px;
          border-radius: 2px;
        }

        .level-warn {
          background: #c49111;
          color: #fff;
        }

        .level-alarm {
          background: #eb3a3d;
          color: #fff;
        }

        .event-type-text {
          margin-left: 16px;
          margin-top: 8px;
          font-family: PingFangSC-Semibold;
          font-size: 12px;
          color: #fad575;
          letter-spacing: 0;
          line-height: 12px;
          font-weight: 600;
        }

        .row-item {
          display: flex;
          align-items: center;
          margin-bottom: 4px;
          margin-left: 12px;
          margin-top: 8px;

          i {
            font-size: 16px;
            color: #fff;
          }

          .val {
            font-family: PingFangSC-Semibold;
            font-size: 12px;
            color: #eee;
            opacity: 0.9;
            letter-spacing: 0;
            line-height: 10px;
          }
        }

        .no-handler {
          background: #eb3a3d;
          color: #fff;
          padding: 4px;
          border-radius: 2px;
        }

        .handler {
          color: #fff;
          background: rgb(44, 196, 44);
          padding: 4px;
          border-radius: 2px;
        }
      }
    }
  }
}

.list-enter-active,
.list-leave-active {
  transition: all 0.5s;
  opacity: 0 !important;
  transform: translateY(30px) !important;
}

.list-enter-to,
.list-leave-from {
  opacity: 1 !important;
  transform: translateY(0px) !important;
}

.image-viewer-custom-content {
  position: absolute;
  left: 340px;
  top: 200px;
  margin: auto;
  color: white;
  z-index: 2000;
  color: red;
}
.empty {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}
</style>
